<template>
	<view class="content">
		<view class="all-box">
			<view class="left-aside">
				<view :class="['left-item', clickIndex == index ? 'left-active-item' : '']" v-for="(item, index) in leftSide"
					:key="index" @click="leftClick(item, index)">
					{{ item.name }}
				</view>
			</view>
			<view class="right">

				<view class="right-tab">
					<u-tabs lineColor="#0170ef" lineWidth="64rpx" lineHeight="8rpx" activeStyle="color:#0170ef" ref="tabs"
						inactiveStyle="#4E5969" :list="tabsList" :current="current" @click="tabsClick" :scrollable="false"></u-tabs>
				</view>


				<template v-if="dataList.length > 0">
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" :enable-passive="true" :lower-threshold="30"
						@scrolltolower="scrolltolower" :refresher-enabled="enablerefresh" :refresher-triggered="triggered"
						:refresher-threshold="100" refresher-default-style="white" refresher-background="#F8F8F8"
						@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
						@refresherabort="onAbort">

						<listItem :type="type" :current="current" :dataList="dataList">
						</listItem>


					</scroll-view>
				</template>
				<view class="no-data" v-else>
					<image src="@/static/no-data.png" mode="widthFix"></image>
					<view class="no-data-text"> 暂无内容 </view>
				</view>
			</view>
		</view>
<!--		<shoptabbar :tabbarIndex="2"></shoptabbar>-->
	</view>
</template>

<script>
	// import shoptabbar from '@/pages/pagesMall/components/shoptabbar/shoptabbar.vue'
	import listItem from "@/pagesMall/components/list/list.vue";
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			// shoptabbar,
			listItem
		},
		computed: {
			...mapGetters(['userInfo']),
		},

		data() {
			return {
				headTitle: "最新推荐",
				//左侧tab数据
				leftSide: [{
					id: "1",
					name: "我的赠送",
				}, {
					id: "2",
					name: "我的领取",
				}, {
					id: "3",
					name: "商品发货",
				}, {
					id: "4",
					name: "我的购买",
				}],
				type: 1, //左侧tab选中id
				clickIndex: 0, //左侧tab选中值
				// 右侧横向tab
				current: 0, //当前右侧默认选中值
				tabsList: [{
						name: '商品'
					}, {
						name: '代金券'
					},
					{
						name: '大礼包'
					}
				],
				//右侧数据
				dataList: [], //界面显示tab的数据
				//优惠券领取状态照片
				couponStatusImgStatus: [
					'https://file.casugn.com/storecompcard//puMCCZBjY0NFf20e585cd67837d1fb0b4d169c695c66_1705286971097.png',
					'https://file.casugn.com/storecompcard//rFciu4kTExbReea3b8a18ade5f13f1da6c83db3a4753_1705287241061.png',
					'https://file.casugn.com/storecompcard//a4bJbKghXzBh202ed71f60e1b134eb21bb644774c316_1705287286207.png'
				],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				rightSide: {}, //用来缓存所有产品数据的
				triggered: false,
				enablerefresh: true,
			};
		},
		// 注释掉onPageScroll使用scrolltolower 就这样吧
		// onPageScroll(e) {
		// 	//如果距顶部小于10，则允许下拉刷新
		// 	if (this.pageNo * this.pageSize < this.total) {
		// 		this.enablerefresh = true
		// 		console.log("允许下拉")
		// 		this.getOrderLists()
		// 	} else {
		// 		console.log("不允许下拉")
		// 		this.enablerefresh = false
		// 	}
		// },
		onLoad() {
			this.type = "3"
			this.clickIndex = 2
			this.current = 0
			this.tabsList = [{
				name: '待发货'
			}, {
				name: '进行中'
			}, {
				name: '已发货'
			}]
		},
		async onShow() {
			this.pageNo = 1
			this.pageSize = 10
			this.dataList = []
			this.getOrderLists()
		},
		methods: {
			getOrderLists() {
				// let {
				// 	openId
				// } = this.userInfo
				let {
					openid
				} = uni.getStorageSync('openId')
				let data = {}
				console.log("===============》")
				console.log(this.type)
				switch (this.type) {
					case '1':
						console.log(1111)
						// 我的售出
						data = {
							openId: openid,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
							giftReceive: this.current + 1,
						}
						this.$api.getMsSendShopOrderList(data).then(res => {
							console.log(res)
							if (res.success) {
								this.dataList = [...this.dataList, ...res.result.records]
								this.total = res.result.total
								this.pageNo = res.result.current
								this.pageSize = res.result.size
							}
						})
						break;
					case '2':
						// 我的领取
						console.log(222)
						data = {
							openId: openid,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
							giftReceive: this.current + 1,
						}
						this.$api.getMsReceiveShopOrderList(data).then(res => {
							console.log(res)
							if (res.success) {
								this.dataList = [...this.dataList, ...res.result.records]
								this.total = res.result.total
								this.pageNo = res.result.current
								this.pageSize = res.result.size
							}
						})
						break;
					case '3':
						// 我的领取
						console.log(222)
						data = {
							openId: openid,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
							sellBuy: this.current + 1,
						}
						this.$api.getMsSoldShopOrderList(data).then(res => {
							console.log(res)
							if (res.success) {
								this.dataList = [...this.dataList, ...res.result.records]
								this.total = res.result.total
								this.pageNo = res.result.current
								this.pageSize = res.result.size
							}
						})
						break;
					case '4':
						// 我的领取
						console.log(222)
						data = {
							openId: openid,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
							// giftReceive: this.current + 1,
							sellBuy: this.current + 1
						}
						this.$api.getMsBuyShopOrderList(data).then(res => {
							console.log(res)
							if (res.success) {
								this.dataList = [...this.dataList, ...res.result.records]
								this.total = res.result.total
								this.pageNo = res.result.current
								this.pageSize = res.result.size
							}
						})
						break;
					default:
						break;
				}

			},
			// 左边菜单点击
			leftClick(item, index) {
				console.log(item, index);
				this.clickIndex = index;
				this.type = item.id;
				if (this.type < 3) {
					this.tabsList = [{
							name: '商品'
						}, {
							name: '代金券'
						},
						{
							name: '大礼包'
						}
					]
				} else {
					this.tabsList = [{
						name: '待发货'
					}, {
						name: '进行中'
					}, {
						name: '已发货'
					}]
				}
				this.current = 0
				this.pageNo = 0
				this.pageSize = 10
				this.dataList = []
				this.getOrderLists()
			},
			// 右侧tab点击切换
			tabsClick({
				index
			}) {
				this.current = index
				console.log(this.current)
				this.pageNo = 0
				this.pageSize = 10
				this.dataList = []
				this.getOrderLists()
			},
			// 注释掉onPageScroll使用scrolltolower 就这样吧
			scrolltolower() {
				//如果距顶部小于10，则允许下拉刷新
				if (this.pageNo * this.pageSize < this.total) {
					this.enablerefresh = true
					console.log("允许下拉")
					this.pageNo += 1
					this.getOrderLists()
				} else {
					console.log("不允许下拉")
					this.enablerefresh = false
				}
			},
			//自定义下拉刷新被触发,重新请求接口
			onRefresh() {
				//做一个判断，判断triggered 是否为true
				if (!this.triggered) {
					this.triggered = true;
					this.pageNo = 1;
					this.leftSide.forEach((item) => {
						if (this.type == "Q554471578" && item.id == "Q554471578") {
							item.isClick = true;
						} else {
							item.isClick = false;
						}
						uni.setStorageSync("leftArr", this.leftSide);
					});
					this.initRightSide(this.getLists(this.type));

					setTimeout((e) => {
						this.triggered = false;
					}, 500);
				}
			},
			//自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log("onpulling", e);
			},
			//下拉请求接口
			//自定义下拉刷新被复位
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			//自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
		},
	};
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	::v-deep.uni-scroll-view-refresh__spinner>circle {
		color: #ff7000 !important;
	}

	::v-deep.uni-scroll-view-refresh-inner>svg {
		fill: #ff7000 !important;
	}

	.content {
		width: 100vw;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 50px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
		box-sizing: border-box;
	}

	.header-titlt {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.all-box {
		display: flex;
		position: relative;
		width: 100%;
		height: 100%;
		// margin-top: 88rpx;

		.left-aside {
			width: 192rpx;
			background: #ffffff;
			height: 100vh;
			position: fixed;

			.left-item {
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
				height: 108rpx;
				line-height: 108rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				border-left: 6rpx solid transparent;
			}

			.left-active-item {
				border-left: 6rpx solid #276AEE;
				color: #276AEE;
				background: #f7f8fa;
			}
		}

		.right {
			width: calc(100% - 194rpx);
			height: 100%;
			margin-left: 194rpx;
			padding-top: 116rpx;
			box-sizing: border-box;
			position: relative;

			.right-tab {
				width: 100%;
				position: absolute;
				top: 0;
				z-index: 10;
				background-color: #f7f8fa;
				padding-top: 32rpx;
			}
		}
	}

	.scroll-Y {
		height: 100%;
	}



	.no-data {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #4e5969;
		padding-top: 228rpx;
		margin: 0 auto;

		image {
			width: 240rpx;
			height: 210rpx;
			margin: auto;
		}

		.no-data-text {
			margin-top: 60rpx;
		}
	}
</style>
